{include file="public/layout" /}
<body class="laytp-container">
<!--
本「综合演示」包含：自定义头部工具栏、获取表格数据、表格重载、自定义模板、单双行显示、单元格编辑、自定义底部分页栏、表格相关事件与操作、与其他组件的结合等相对常用的功能，以便快速掌握 table 组件的使用。
-->

<div class="layui-card" id="search-form">
    <div class="layui-card-body">
    <form class="layui-form layui-row layui-col-space16 layui-search-admin">
        <div class="layui-inline">
            <label class="layui-form-label">会员ID</label>
            <div class="layui-input-inline">
                <input type="text" name="user_id" value="" placeholder="会员ID" class="layui-input" lay-affix="clear">
            </div>
        </div>
        <div class="layui-inline">
           <label class="layui-form-label">会员编号</label>
            <div class="layui-input-inline">
                <input type="text" name="username" placeholder="会员编号" lay-affix="clear" class="layui-input">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">操作时间</label>
            <div class="layui-inline" id="laydate-rangeLinked">
                <div class="layui-input-inline">
                    <input type="text" name="time_start" autocomplete="off" id="table-search-date-start"
                           class="layui-input" placeholder="开始日期">
                </div>
                -
                <div class="layui-input-inline">
                    <input type="text" name="time_end" autocomplete="off" id="table-search-date-end" class="layui-input"
                           placeholder="结束日期">
                </div>
            </div>
        </div>
        <div class="layui-inline">
            <button class="layui-btn" lay-submit lay-filter="demo-table-search">搜索</button>
            <button type="reset" class="layui-btn layui-btn-primary">清空</button>
        </div>
    </form>
</div>
<div class="layui-card">
    <div class="layui-card-body">
        <table class="layui-hide" id="test" lay-filter="test"></table>
    </div>
</div>
<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" onclick="txset()">
            提现设置
        </button>
        <button class="layui-btn layui-btn-sm" onclick="reload()">
            刷新数据
        </button>
        <!--    <button class="layui-btn layui-btn-sm" onclick="del()">-->
        <!--      批量删除-->
        <!--    </button>-->
        <button class="layui-btn layui-btn-sm" data-form-export="{:url('money_log')}/money_type/{$money_type}">
            导出数据
        </button>

    </div>
</script>
<script type="text/html" id="barDemo">
    <div class="layui-clear-space">
        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
        <a class="layui-btn layui-btn-xs" lay-event="more">
            更多
            <i class="layui-icon layui-icon-down"></i>
        </a>
    </div>
</script>
<script>
    var tableIns
    var datawhere = {};
    layui.use(function () {
        var table = layui.table;
        var dropdown = layui.dropdown;
        var laydate = layui.laydate;
        var form = layui.form;

        // 创建渲染实例
        tableIns = table.render({
            elem: '#test',
            url: '{:url("money_log",["money_type"=>$money_type])}', // 此处为静态模拟数据，实际使用时需换成真实接口
            toolbar: '#toolbarDemo',
            defaultToolbar: ['filter', 'exports', 'print', {
                title: '提示',
                layEvent: 'LAYTABLE_TIPS',
                icon: 'layui-icon-tips'
            }],
            height: 'full-200', // 最大高度减去其他容器已占有的高度差
            css: [ // 重设当前表格样式
                '.layui-table-tool-temp{padding-right: 145px;}'
            ].join(''),
            cellMinWidth: 80,
            totalRow: true, // 开启合计行
            page: true,
            pagebar: '#test-pagebar', // 分页栏模板
            cols: [[
                {type: 'checkbox', fixed: 'left'},
                {field: 'id', fixed: 'left', width: 80, title: 'ID', sort: true, totalRowText: '合计：'},
                {field: 'user_id', width: 80, title: '会员ID', totalRowText: ''},
                {field: 'username', title: '会员编号', totalRowText: ''},
                {field: 'money', title: '变动金额', totalRowText: ''},
                {field: 'yue', title: '变动后余额', totalRowText: ''},
                {field: 'action', title: '操作类型', totalRowText: ''},
                {field: 'desc', title: '备注', totalRowText: ''},
                {
                    field: 'w_time', title: '变动时间', templet: function (d) {
                        return date('Y-m-d H:i', d.w_time)
                    }
                },
                {
                    fixed: 'right', title: '操作', width: 134, minWidth: 125, templet: function (d) {
                        var html = '';
                        // html += '<a class="layui-btn layui-btn-xs" onclick="detail('+d.order_id+')">查看</a>';
                        return html;
                    }
                }
            ]],
            error: function (res, msg) {
                console.log(res, msg)
            }
        });

        // 触发单元格工具事件
        table.on('tool(test)', function (obj) { // 双击 toolDouble
            var data = obj.data; // 获得当前行数据
            // console.log(obj)
            if (obj.event === 'edit') {
                layer.open({
                    title: '编辑 - id:' + data.user_id,
                    type: 2,
                    shadeClose: true,
                    area: ['100%', '100%'],
                    scrollbar: false,
                    content: '{:url("detail")}/id/' + data.user_id
                });
            } else if (obj.event === 'more') {
                // 更多 - 下拉菜单
                dropdown.render({
                    elem: this, // 触发事件的 DOM 对象
                    show: true, // 外部事件触发即显示
                    data: [{
                        title: '查看',
                        id: 'detail'
                    }, {
                        title: '删除',
                        id: 'del'
                    }],
                    click: function (menudata) {
                        if (menudata.id === 'detail') {
                            layer.msg('查看操作，当前行 ID:' + data.id);
                        } else if (menudata.id === 'del') {
                            layer.confirm('真的删除行 [id: ' + data.id + '] 么', function (index) {
                                obj.del(); // 删除对应行（tr）的DOM结构
                                layer.close(index);
                                // 向服务端发送删除指令
                            });
                        }
                    },
                    align: 'right', // 右对齐弹出
                    style: 'box-shadow: 1px 1px 10px rgb(0 0 0 / 12%);' // 设置额外样式
                })
            }
        });

        laydate.render({
            elem: '.demo-table-search-date'
        });
        laydate.render({
            elem: '#laydate-rangeLinked',
            type: 'datetime',
            range: ['#table-search-date-start', '#table-search-date-end'],
            rangeLinked: true // 开启日期范围选择时的区间联动标注模式 ---  2.8+ 新增
        });
        // 搜索提交
        form.on('submit(demo-table-search)', function (data) {
            var field = data.field; // 获得表单字段
            datawhere = field;
            // 执行搜索重载
            table.reload('test', {
                page: {
                    curr: 1 // 重新从第 1 页开始
                },
                where: field // 搜索的字段
            });
            //layer.msg('搜索成功<br>此处为静态模拟数据，实际使用时换成真实接口即可');
            return false; // 阻止默认 form 跳转
        });
    });

    function reload() {
        layui.table.reload('test', {
            where: {
                abc: 123,
                test: '新的 test1'
            },
            // scrollPos: 'fixed',  // 保持滚动条位置不变 - v2.7.3 新增
            // height: 2000, // 测试无效参数（即与数据无关的参数设置无效，此处以 height 设置无效为例）
            //url: '404',
            //page: {curr: 1, limit: 30} // 重新指向分页
        }, true);
    }

    function del() {
        var checkStatus = layui.table.checkStatus('test');
        var data = checkStatus.data;
        layer.alert(layui.util.escape(JSON.stringify(data)));
    }

    function txset() {
        layer.open({
            title: '提现设置',
            type: 2,
            shadeClose: true,
            area: ['100%', '100%'],
            scrollbar: false,
            content: '{:url("txset")}/money_type/{$money_type}'
        });
    }

    function excel() {

    }
</script>
</body>
</html>